import { Form, Button, Modal, Table} from 'antd';

import React from 'react';
import { connect } from 'dva';
import EditException from './EditException';

let editException: any = {};


const ExceptionModel = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = (props: any) => {
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    handleAdd = (e: any) => {
      if (editException) editException.handleOpen();
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;

      const exceptionColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '类型', dataIndex: 'type', key: 'type' },
        { title: '工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '客户名称', dataIndex: 'customerName', key: 'customerName' },
        { title: '原因', dataIndex: 'reason', key: 'reason' },
        { title: '描述', dataIndex: 'desc', key: 'desc' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '处理人', dataIndex: 'deal', key: 'deal' },
        { title: '处理时间', dataIndex: 'dealTime', key: 'dealTime' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          // @ts-ignore
          render: (record: any) =>
            <a href="#"
               onClick={() => {
                 if (editException) editException.handleOpen();
               }}
            >详情</a>,
        },
      ];

      const exceptionData = [
        {
          key: '1',
          id: 2,
          serviceNo: 'zbt51591',
          workNo: '61455',
          type: '海运整柜',
          customerName: '林科技',
          reason: '天气异常',
          desc: '因台风影响',
          deal: '刘倩婷',
          status: '未处理',
          dealTime: '2019-01-01',
        },
      ];


      // @ts-ignore
      const exceptionTable = <Table loading={this.props.loading} rowKey="id" dataSource ={exceptionData} columns={exceptionColumns} bordered size="middle"/>;

      const footer = [];
      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );


      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="异常"
          // @ts-ignore
          visible={this.state.open}
          width={850}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <div>
              {/* eslint-disable-next-line react/jsx-no-bind */}
              <Button style={{ marginRight: 8 }} onClick={this.handleAdd.bind(this)}>
                新增
              </Button>
              {exceptionTable}

              {/* eslint-disable-next-line no-return-assign,max-len */}
              <EditException wrappedComponentRef={(inst: any) => (editException = inst)}
                             {...editException}
              />
            </div>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(ExceptionModel);
